<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>转手商城-后台登录</title>
		<link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/login.css" />

		<script src="../static/js/public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/public/jquery.session.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/public/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/public/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>转手商城-后台登录</h3>
				<div class="m-login-warp" id='login'>
					<form class="layui-form" @submit.prevent="onSubmit">
						<div class="layui-form-item">
							<input v-model="account" type="text" name="account" placeholder="账号" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<input v-model="password" type="password" name="password" placeholder="密码" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<input v-model="code" type="text" name="code" placeholder="验证码" autocomplete="off" class="layui-input">
							</div>
							<!-- 动态生成验证码 -->
							<canvas id="verifyCanvas"></canvas>
							<img @click="checknum()" id="code_img">
						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button @click="loginSubmit()" class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>
				</div>
				<p class="copyright">Copyright 2019-2020 by ChangeHands</p>
				<p class="copyright"><a class="copyright-a" href="http://beian.miit.gov.cn/" target="_blank"><img src="../static/images/pb.png"
						 width="14px" /> 桂ICP备18009318号-1</a></p>
			</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#login',
				data: {
					account: "",
					password: "",
					code: ""
				},
				methods: {
					
					fn(url) {
					  var wheight = window.innerHeight
					  layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						skin: 'layui-layer-nobg',
						shadeClose: true,
						content: '<img src="'+ url +'" style="max-height: '+ wheight * 0.7 +'px">',
						area: ['auto','auto']
					  })
					},
					loginSubmit() {
						if (validityForStringNull(this.$data.account, "账号不能为空") ||
							validityForStringNull(this.$data.password, "密码不能为空") ||
							validityForStringNull(this.$data.code, "验证码不能为空")) {
							return;
						}

						if (!validityForStringEqual(this.$data.code, verVal)) {
							alert("验证码不正确", function() {
								//生成验证码
								let num = checknum('code_img', 'verifyCanvas');
							})
							return;
						}

						//取消vue的自动转换
						let param = new URLSearchParams()
						param.append('account', this.$data.account)
						param.append('password', this.$data.password)
						axios({
							method: 'post',
							url: getRootURL() + 'admin/login',
							data: param,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								alert(res.data.msg, function() {
									var authorization = res.headers['authorization'];
									$.session.set("token", authorization);
									$(location).attr('href', '../admin/index.html');
								});
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					
					onSubmit() {
						//防止form冒泡
						return false;
					},

					checknum() {
						//生成验证码
						let num = checknum('code_img', 'verifyCanvas');
					}
				},
				//初始化时请求
				mounted() {
					checknum('code_img', 'verifyCanvas') //生成验证码
				}
			})
		</script>

	</body>

</html>
